import React,{Component} from 'react';
import {
	View,
	Text,
	StyleSheet,
	Image,
	TextInput,
	TouchableOpacity,
	DeviceEventEmitter
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import {
	scaleSize,
	setSpText,
	WIDTH
} from './util';

export default class WriteBar extends Component{
	constructor(props) {
	  super(props);
	
	  this.state = {
		isClickWrite:false,
		send_btn_color:'#888',
	  };
	}
	componentDidMount(){
		/*DeviceEventEmitter.on("blur",function(){

		});*/
	}
	handleWrite(){
		this.setState({
			isClickWrite:true,
		});
	}
	onChangeText(text){
		if(text.length>0){
			this.setState({
				send_btn_color:'#1f7fe5',
			})
		}else{
			this.setState({
				send_btn_color:'#888',
			})
		}
	}
	render(){
		var {onChangeText,onSubmit} = this.props;
		var initialContent=(
				<View style={{
					flex:1,
					alignItems:"center",
					flexDirection:'row',
				}}>
					<TouchableOpacity activeOpacity={0.7}  onPress={this.handleWrite.bind(this)}>
						<Image 
							source={require('../../images/zhcs/write_bar_img.png')} 
							style={{width:scaleSize(736),height:scaleSize(90) }}  />					
					</TouchableOpacity>
					<View style={{width:scaleSize(60),marginLeft:scaleSize(70)}}>
						<Image source={require('../../images/zhcs/thumb_up.png')}  
						style={{width:scaleSize(60),height:scaleSize(60)}} />
					</View>
					<View style={{width:scaleSize(60),marginLeft:scaleSize(70)}}>
						<Image source={require('../../images/zhcs/write_share.png')}  
						style={{width:scaleSize(60),height:scaleSize(60)}} />
					</View>						
				</View>			
			);
		var writeContent=(
				<View style={{
					flex:1,
					alignItems:"center",
					flexDirection:'row',
				}}>
					<TextInput 
					autoFocus={true}
					placeholder={"优质评论将会被优先展示"}
					style={styles.input}
					underlineColorAndroid='transparent' 
					returnKeyType={'send'}
					onChangeText={this.onChangeText.bind(this)}
					onBlur={()=>this.setState({isClickWrite:false})} />

					<TouchableOpacity activeOpacity={0.8} style={{width:scaleSize(100),marginLeft:scaleSize(70)}} onPress={onSubmit}>
						<Text style={{color:this.state.send_btn_color,fontWeight:"bold"}}>发布</Text>
					</TouchableOpacity>
				</View>
			);
		return (
				<View style={styles.container}>
					{
						this.state.isClickWrite
						?writeContent
						:initialContent
					}
					
				</View>
			);
	}
}



const styles=StyleSheet.create({
	container:{
		backgroundColor:"#fff",
		height:scaleSize(120),
		width:WIDTH,
		borderTopWidth:1,
		borderTopColor:"#d6d6d6",
		
		paddingHorizontal:scaleSize(40),
	},
	input:{
		flex:1,
		height:scaleSize(80),
		borderRadius:scaleSize(20),
		paddingHorizontal:scaleSize(30),
		paddingVertical:scaleSize(10),
		backgroundColor:"#f0f4f3"
	}
})